<template>
	<body-wrap>
		<view class="hearderImg">
			<image @click="goPage" v-if="userInfo.id" class="imgbox" :src="userInfo.headerImg || AVATAR_DEFAULT" mode="aspectFill"/>
			<view v-else class="txt" @click="goLogin">
				<view>登陆</view>
			</view>
		</view>
		<view class="name">{{userInfo.name}}</view>
		<view class="homeIndexMain">
			<view class="mList">
				<navigator class="mLi" url="/pages/home/order/order">
					<view class="label">我的订单</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/service/service">
					<view class="label">我的服务</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/help/help">
					<view class="label">我的互助</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</navigator>
				<navigator class="mLi" url="/pages/home/integral/integral">
					<view class="label">我的积分</view>
					<view class="imgbox">
						<image class="icon" :src="imgUrlPrefix+'static/images/xjt.png'" mode="aspectFill"></image>
					</view>
				</navigator>
			</view>
		</view>
		<!-- <button @click="LoginDL">一键登陆</button> -->
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {AVATAR_DEFAULT} from "@/utils/config.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				imgUrlPrefix:getApp().globalData.imgUrlPrefix,
				userInfo:computed(()=>store.state.base.userInfo), 
			})
			
			onMounted(()=>{
				console.log("userInfo:",state.userInfo)
			})
			
			const LoginDL =()=>{
				console.log("-------准备获取用户信息")
				uni.getUserProfile({
					desc:'用于完善用户信息',
					success:(o)=>{
						console.log("IIIII:",o)
					}
				})
			}
			
			const goPage = ()=>{
				uni.navigateTo({
					url:'/pages/home/userInfo/userInfo'
				})
			}
			
			const goLogin = ()=>{
				uni.showModal({
					title: '提示',
					content: '系统使用当前微信登录',
					showCancel: false,
					success: async (res)=> {
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			}
			
			return {
				...toRefs(state),
				LoginDL,
				goPage,
				goLogin
			}
		}
	})
</script>

<style lang="scss" scoped>
	.hearderImg{
		display: block;
		width: 180rpx;
		height: 180rpx;
		margin: 30rpx auto 0 auto;
		border-radius:50% ;
		overflow: hidden;
		background-color: #bb740d;
		.imgbox{
			display: block;
			width: 100%;
			height: 100%;
		}
		.txt{
			text-align: center;
			line-height: 180rpx;
			font-size: 38rpx;
			padding: 0;
			color: #fff;
		}
	}
	.name{
		text-align: center;
		font-size: 34rpx;
		padding: 20rpx 0;
	}
	.homeIndexMain{
		padding: 30rpx;
		.mList{
			.mLi{
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				background: #fff;
				border-radius:20rpx ;
				font-size: 32rpx;
				padding: 0 20rpx 0 30rpx;
				margin: 0 0 40rpx 0;
				.label{
					flex: 1;
				}
				.imgbox{
					width: 50rpx;
					height: 50rpx;
					transform: rotate(-90deg);
					-webkit-transform: rotate(-90deg);
					margin: 30rpx 0 0 0;
					.icon{
						display: block;
						width:100%;
						height: 100%;
						opacity: 0.5;
					}
				}
			}
		}
	}
</style>
